<template>
	<view class="box-c">
		<view class="box-c login-list-3 fist">
				<view class="box1">
					<input placeholder-style="fontSize:30rpx;color:#999" class="input ml-2" type="text" placeholder="请输入你的手机号" @input="phoneInput" v-model="parameter.phone" />
				</view>
		</view>
		<view class="box-c login-list-3">
			<!-- <view class="box"> -->
				<view class="box">
					<input v-model="parameter.password" class="input-code" :password="showPassword" type="text" value=""
						placeholder-style="fontSize:30rpx;color:#999" placeholder="设置新登录密码" />
				
					<text class="iconfont" :class="showPassword?'icon-yanjing':'icon-yanjingbiyan'"
						@tap="catPassword"></text>
					
				</view>
			<!-- </view> -->
		</view>
		<view class="box-c login-list-3">
			<!-- <view class="box "> -->
				<view class="box">
					<input placeholder-style="fontSize:30rpx;color:#999" class="input-code" type="text" placeholder="请输入验证码" v-model="parameter.verification" />
		
					<text v-if="timeFlag" class="time">
						{{timeCount}}
					</text>
					<text @tap="getCode" v-else class="getCode">
						获取验证码
					</text>
				<!-- </view> -->
			</view>
		</view>
		<view class="regist-list-4">
			<button type="default" @tap="submit" :loading="loading">确认修改</button>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPassword:true,
				showPhoneIcon: false,
				parameter: {
					password: '',
					verification: '',
					phone: '',
					verificationType: '6'
				},
				loading: false,
				timeFlag: false,
				totalTime: 59,
				timeCount: ''
			}
		},
		methods: {
			catPassword() {
				this.showPassword = !this.showPassword
			},
			submit() {
				console.log(this.parameter)
				if (this.parameter.phone == '') {
					uni.showToast({
						title: '请输入手机号',
						duration: 1000,
						icon: "none"
					});
					return
				}
				if (this.parameter.verification == '') {
					uni.showToast({
						title: '验证码不能为空',
						duration: 1000,
						icon: "none"
					});
					return
				}
				if (this.parameter.password == '') {
					uni.showToast({
						title: '请输入密码',
						duration: 1000,
						icon: "none"
					});
					return
				}
				this.$api.resetShopPassword(this.parameter).then((res) =>{
					if(res.data.code == 200){
						uni.showToast({
							title: '已为您重置密码',
							duration: 500,
							icon: "none"
						});
						setTimeout(function() {
							uni.navigateBack({
								delta: 1,
								animationType: 'pop-out',
								animationDuration: 200
							});
						}, 500);
					}else{
						uni.showToast({
							title: res.data.message,
							duration: 1000,
							icon: "none"
						});
					}
					


				})

			},
			getCode() {
				if (this.parameter.phone == '') {
					uni.showToast({
						title: '请输入手机号',
						duration: 1000,
						icon: "none"
					});
					return
				}
				this.$api.getVerificationCode(this.parameter).then((res) => {
					if (res.data.code == 200) {
						this.timeFlag = true
						this.timeCount = this.totalTime + 's'
						let clock = setInterval(() => {
							this.totalTime--
							this.timeCount = this.totalTime + 's'
							if (this.totalTime < 0) { //当倒计时小于0时清除定时器
								clearInterval(clock)
								this.timeFlag = false
								this.totalTime = 59
							}
						}, 1000)
					} else {
						uni.showToast({
							title: res.data.message,
							duration: 1000,
							icon: "none"
						});

					}
				})



			},

			phoneInput(event) {
				this.phone = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showPhoneIcon = true;
				} else {
					this.showPhoneIcon = false;
				}
			},
			clearIcon() {
				this.parameter.username = ''
				this.showPhoneIcon = false

			},

		}
	}
</script>

<style scoped>
	.box1{
			 display: flex;
			 width: 630rpx;
			 height: 100rpx;
			 margin-left: 60rpx;
			 border: 1px solid #CCCCCC;
	         align-items: center;
			 justify-content: left;
			 border-radius: 12rpx;
	}
	.iconfont{
		margin-left: 300rpx;
	}
	.input-code{
		margin-left: -40rpx;
	}
	.regist-list-4 button {
		margin-top: 40rpx;
		width: 600rpx;
		background-color: #FF5551;
		border-radius: 12rpx;
		color: #FFFFFF;
		font-size: 32rpx

	}

	.fist {
		margin-top: 100rpx !important;
	}
     .box{
		 display: flex;
		 width: 630rpx;
		 height: 100rpx;
		 margin-left: 60rpx;
		 border: 1px solid #CCCCCC;
  	     align-items: center;
		 justify-content: center;
		 border-radius: 12rpx;
	 }
	.time {
		border-radius: 30rpx;
		height: 55rpx;
		line-height: 55rpx;
		text-align: center;
		width: 180rpx;
		color: #FF5551;
		margin-left: 150rpx;
		margin-top: 25rpx;
	}

	.getCode {
		border-radius: 30rpx;
		height: 55rpx;
		line-height: 55rpx;
		text-align: center;
		width: 180rpx;
		color: #FF5551;
		margin-left: 150rpx;
		
	}

	.input-code {
		width: 220rpx;
	}

	/* .input {
		margin-left: 60rpx;
		width: 630rpx;
		height: 100rpx;
		border: 1px solid #CCCCCC;
		
	} */

	.login-list-3 {
		width: 750rpx;
		margin: 5px auto;

	}
</style>
